<template>
  <div :class="index !== 0 ? 'list' : 'unlist'">
    <div class="topTit" v-if="index !== 0">
      <span class="sm">3.8女王节-</span>
      <span class="big">阿里健康大药房治愈好物专场</span>
    </div>
    <div class="table_he" v-if="index !== 0">
      <div class="he_item">商品图</div>
      <div class="he_item">商品</div>
      <div class="he_item">卖点</div>
      <div class="he_item">到手价</div>
      <div class="he_item spec">复制口令打开淘宝</div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <div class="info-list" v-if="index !== 0" style="height:100%" ref="infoList">
        <swiper :options="swiperOption" class="swiper" @touchEnd='touchEnd' @sliderMove='sliderMove'>
          <swiper-slide  v-for="(item, index) in list" :key="index">
              <ListItem class="listItem" :data-index='item.index' style="height: 100%;" :item="item" @realheight="realheight"
                :isOrnot="item.id == lightItem.id ? 0 : 1"
                ref="`listitem${item.id}`"
              ></ListItem>
          </swiper-slide>
        </swiper>
        <div class="secItem">
          <div class="imgs">
            <!-- {{ lightItem.index }} -->
            <img :src="lightItem.productImage" alt="" />
          </div>
          <div class="right">
            <div class="top">{{ lightItem.discnt }}</div>
            <div class="name">{{ lightItem.productName }}</div>
            <div class="newPrize">
              <span class="dw">￥</span>{{ lightItem.getPrice }}
            </div>
            <img
              src="http://sino-sources.com/h5a1/img/fire.gif"
              alt=""
              v-if="baokuan"
              class="icon"
            />
          </div>
          <div class="copybtn">
            <img
              src="http://sino-sources.com/h5a1/img/click.gif"
              alt=""
              class="btn"
              id="btn"
              :data-clipboard-text="lightItem.kouling"
              @click="copy(lightItem.id)"
            />
          </div>
        </div>
      </div>
      <div class="p" v-else>
        <div class="pyq">
          <!-- 顶部背景区域 -->
          <div class="top_bg">
            <div class="avatar">
              <img
                class="img"
                src="http://sino-sources.com/h5a1/h/heardrImg001.jpg"
                alt=""
              />
            </div>
            <div class="name">天猫官方爆款清单</div>
          </div>
          <div class="item_p" v-for="item in pyqlist" :key="item.id">
            <img class="avatar" :src="item.custHearImg" alt="" />
            <div class="ownInfo">
              <div class="name">{{ item.custName }}</div>
              <div class="txt">
                {{ item.custMind }}
              </div>
              <!-- 发图了 -->
              <div class="imgs">
                <img
                  v-for="(itme, index) in item.imageArray"
                  :key="index"
                  :src="itme.url"
                  alt=""
                />
              </div>
              <!-- 产品信息 -->
              <div class="proinfo">
                <div class="intro">
                  <div></div>
                  <div
                    class="right"
                    id="btn1"
                    :data-clipboard-text="item.remark"
                    @click="copyLink(item.id)"
                  >
                    <a href="javascript:void(0)">复制口令</a>
                  </div>
                </div>
              </div>
              <!-- 评论区 -->
              <div class="comment">
                <div class="item_com top" @click="cant(item.id)">
                  <i
                    class="iconfont"
                    :class="
                      item.dianzan === 0
                        ? 'icon-dianzan'
                        : 'icon-buoumaotubiao16'
                    "
                  ></i>
                  {{ item.goodCnt }}人点赞
                </div>
                <div class="item_com">
                  <div
                    class="com"
                    v-for="(itmm, index) in item.commentsList"
                    :key="index"
                  >
                    <span class="info" v-if="itmm.type == 0">
                      {{ itmm.name }}：<span class="informa">{{
                        itmm.info
                      }}</span>
                    </span>
                    <span class="info" v-else>
                      {{ itmm.name }} <span class="informa1">回复</span>
                      {{ itmm.rename }}：<span class="informa">{{
                        itmm.info
                      }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 切换 -->
    <div class="select">
      <div
        @click="change(0)"
        :class="index === 0 ? 'chosed' : ''"
        class="options"
      >
        <div class="name">朋友圈凡文大赏</div>
      </div>
      <div
        class="options"
        v-for="item in cateList"
        :key="item.catelog"
        @click="change(item.catelog)"
        :class="index === item.catelog ? 'chosed' : ''"
      >
        <div class="name">{{ item.catelogName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import ListItem from '@/components/xc-list-item.vue'
import {
  getcate,
  getlistBycate,
  getPengyq,
  dianzans,
  getshareinfo,
  tjshare,
  copylinknote
} from '@/api/api.js'
import wx from 'weixin-sdk-js'
// @ is an alias to /src
import Clipboard from 'clipboard'

export default {
  data () {
    return {
      list: [],
      reallist: [],
      index: 0,
      shareData: {},
      size: 0,
      cateList: [],
      height: '',
      lightItem: {},
      lights: {},
      pyqlist: [],
      cntlist: [],
      scrollTop: 0,
      offsettop: '',
      oldScrollTop: 0,
      t: 0,
      swiperOption: {
        // swiper无缝滚动配置项
        notNextTick: true,
        direction: 'vertical',
        speed: 1500, // 滚动速度
        setWrapperSize: true,
        freeMode: true, // true则是自由模式，不会自动贴合滑动位置
        autoplay: {
          delay: 1,
          autoplayDisableOnInteraction: false
        },
        loop: true, // 循环
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 10, // slide可见数量
        calculateHeight: true
      }
    }
  },
  computed: {
    baokuan: function () {
      return (
        this.lightItem.index === 1 ||
        this.lightItem.index === 2 ||
        this.lightItem.index === 3 ||
        this.lightItem.index === 4 ||
        this.lightItem.index === 5
      )
    }
  },
  methods: {
    touchEnd (swiper, e) {
      this.list.filter(item => {
        if (String(item.index + 2) === e.path[1].dataset.index) {
          this.lightItem = item
        }
      })
    },
    // sliderMove (swiper, e) {
    //   console.log(e.path[1].dataset.index)
    //   setTimeout(() => {
    //     this.list.filter(item => {
    //       if (String(item.index) === e.path[1].dataset.index) {
    //         this.lightItem = item
    //       }
    //     })
    //   }, 20)
    // },
    copyMeth (kouling) {
      console.log(kouling)
    },
    async change (index) {
      this.list = []
      this.lightItem = {}
      this.index = index
      const res = await getlistBycate({ catelog: index })
      this.list = res.data
      this.reallist = res.data
      this.lightItem = this.list[0]
      this.lights = this.list[0]
      // console.log('总', this.$refs.infoList.clientHeight, this.height)
    },
    async getcateList () {
      const res = await getcate()
      this.cateList = res.data
    },
    async initpyq () {
      const res = await getPengyq()
      res.data.map(item => {
        const list = []
        item.commentArray.map(itme => {
          const arr = itme.comm.split('：')
          if (arr[0] === item.custName) {
            // 这是回复
          }
          const tmp = {
            name: arr[0],
            info: arr[1],
            type: 0,
            rename: ''
          }
          list.push(tmp)
        })
        // list.map(items => {
        //   if (items.name === item.custName) {
        //     items.type = 1
        //   }
        // })
        for (let i = 0; i < list.length; i++) {
          if (list[i].name === item.custName) {
            if (i !== 0) {
              list[i].type = 1
              list[i].rename = list[i - 1].name
            }
          }
        }
        item.commentsList = list
        item.dianzan = 0
      })
      this.pyqlist = res.data
    },
    async cant (id) {
      this.pyqlist.filter(item => {
        if (item.id === id) {
          item.dianzan = 1
          item.goodCnt = item.goodCnt + 1
        }
      })
      dianzans(id)
    },
    realheight (num) {
      console.log('渲染完了', num)
      if (!this.height) {
        this.height = num
        this.swiperOption.slidesPerView = Math.ceil(this.$refs.infoList.clientHeight / num) + 1
        console.log(this.swiperOption.slidesPerView)
        console.log()
      } else {
        return false
      }
    },
    copy (id) {
      copylinknote(id)
      // const copybtn = document.getElementById('btn')
      // var clipBoard = new Clipboard(copybtn);
      var clipBoard = new Clipboard('#btn')
      clipBoard.on('success', function () {
        clipBoard.destroy() // 销毁上一次的复制内容
        clipBoard = new Clipboard('#btn')
        alert('您已成功复制口令，打开手淘抢购吧')
      })
      clipBoard.on('error', function () {
        alert('复制失败，请手动复制')
      })
    },
    copyLink (id) {
      copylinknote(id)
      // const copybtn = document.getElementById('btn')
      // var clipBoard = new Clipboard(copybtn);
      var clipBoard = new Clipboard('#btn1')
      clipBoard.on('success', function () {
        clipBoard.destroy() // 销毁上一次的复制内容
        clipBoard = new Clipboard('#btn')
        alert('您已成功复制口令，打开手淘抢购吧')
      })
      clipBoard.on('error', function () {
        alert('复制失败，请手动复制')
      })
    }
    // scrollCont () {
    //   this.scrollTop = listwrap.value.scrollTop
    //   let bool
    //   if (t < this.scrollTop) {
    //     const num = this.scrollTop / this.height
    //     this.lights = this.list[parseInt(num)]
    //     if (this.index === '1') {
    //       bool =
    //         listwrap.value.scrollHeight -
    //           1 -
    //           listwrap.value.scrollTop -
    //           listwrap.value.clientHeight <
    //         this.height
    //       if (bool) {
    //         this.list.push(this.list[0])
    //         this.list.shift()
    //       }
    //     } else if (this.index === '2') {
    //       bool =
    //         listwrap.value.scrollHeight -
    //           listwrap.value.scrollTop -
    //           listwrap.value.clientHeight <
    //         20
    //       if (bool) {
    //         this.list.push(this.list[0])
    //         this.list.shift()
    //       }
    //     } else {
    //       bool =
    //         listwrap.value.scrollHeight -
    //           listwrap.value.scrollTop -
    //           listwrap.value.clientHeight <
    //         this.height
    //       if (bool) {
    //         this.list.push(this.list[0])
    //         this.list.shift()
    //       }
    //     }
    //   } else {
    //     console.log('下拉')
    //     const num = this.scrollTop / this.height
    //     this.lights = this.list[parseInt(num)]
    //     console.log(this.height)
    //     if (this.scrollTop < 2 * this.height && this.scrollTop >= 0) {
    //       const ind = this.list.length - 1
    //       this.list.unshift(this.list[ind])
    //       this.list.pop()
    //     }
    //   }
    //   setTimeout(() => {
    //     t = this.scrollTop
    //   }, 20)
    //   // 上划加载到头
    //   // 下拉
    // }
  },
  watch: {
    screenTop: function (newval, old) {
      if (newval === 0) {
        console.log('到0了')
        const ind = this.list.length - 1
        this.list.unshift(this.list[ind])
        this.list.pop()
        console.log('newlsit', this.list)
      }
    },
    lights: function (newValue, oldValue) {
      if (newValue) {
        if (newValue.id !== this.lightItem.id) {
          setTimeout(() => {
            this.lightItem = newValue
          }, 20)
        }
      }
    }
  },
  async mounted () {
    console.log(this.height, 'heightheighit')
    this.getcateList()
    this.initpyq()
    var url = location.href.split('#')[0]
    const res = await getshareinfo(url)
    const appId = 'wx1d5d3c3f61eba584'
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话，可以开了看对应报错信息
      appId: appId,
      timestamp: res.timestamp,
      nonceStr: res.nonceStr,
      signature: res.signature,
      jsApiList: [
        // 需要使用的JS接口列表,分享默认这几个，如果有其他的功能比如图片上传之类的，需要添加对应api进来
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'updateAppMessageShareData',
        'updateTimelineShareData'
      ]
    })
    const shareconfig = {
      share: {
        imgUrl: 'http://sino-sources.com/h5a1/h/heardrImg.jpg', // 分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
        desc: '多款爆品，心动福利，治愈每个她！', // 摘要,如果分享到朋友圈的话，不显示摘要。
        title: ' 3.8女王节治愈好物专场', // 分享卡片标题
        link: url, // 分享出去后的链接，这里可以将链接设置为另一个页面。
        success: function (e) {
          // 分享成功后的回调函数
          tjshare()
        },
        cancel: function (e) {
          // 用户取消分享后执行的回调函数
        }
      }
    }
    wx.ready(function () {
      wx.onMenuShareAppMessage(shareconfig.share) // 分享给好友
      wx.onMenuShareTimeline(shareconfig.share) // 分享到朋友圈
      wx.onMenuShareQQ(shareconfig.share) // 分享给手机QQ
    })
  },
  components: { ListItem }
}
</script>

<style lang="scss">
.swiper {
  height: 100vh;
}
// .swiper-wrapper{
//   transition-timing-function:linear!important;
// }
.seamless {
  height: 100vh;
  overflow: hidden;
}
.list {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
.unlist {
  padding-bottom: 1rem;
}
.topTit {
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  background-color: #1eac4e;
  text-align: left;
  padding-left: 2em;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .big {
    font-size: 0.3rem;
  }
}

.table_he {
  width: 100%;
  height: 0.6rem;
  line-height: 2.5em;
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  position: fixed;
  z-index: 9999;
  top: 0.9rem;
  left: 0;
  .he_item {
    width: 20%;
    font-size: 0.23rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2em;
    border-right: 1px solid #000;
  }
  .he_item:last-child {
    border: none;
  }
  .spec {
    font-size: 0.23rem;
    line-height: 1;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    .info {
      width: 8em;
    }
  }
}

.content {
  .info-list {
    position: relative;
    .secItem {
      border: 1px solid red;
      transition: all 0.5s linear;
      width: 100%;
      height: 1.9rem;
      background-color: #fff;
      z-index: 888;
      position: fixed;
      top: 1.5rem;
      left: 0;
      display: flex;
      align-items: center;
      padding: 0.2rem;
      .imgs {
        display: flex;
        align-items: center;
        margin-right: 0.1rem;
        position: relative;
        img {
          width: 1.85rem;
          height: 1.85rem;
        }
        .icon {
          width: 0.5rem;
          height: 0.5rem;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .btn {
        width: 1.7rem;
        text-align: center;
      }
      .copybtn {
        display: flex;
        flex-direction: column;
        align-items: center;
        .clickbtn {
          width: 0.5rem;
          height: 0.5rem;
        }
      }
      .right {
        padding: 0.1rem;
        flex: 1;
        position: relative;
        .icon {
          width: 0.8rem;
          height: 0.8rem;
          position: absolute;
          right: 0.3rem;
          top: 50%;
          transform: translateY(-50%);
        }
        div {
          line-height: 1.5em;
        }
        .top {
          color: #e75257;
          font-size: 0.3rem;
          font-weight: 600;
          line-height: 1.5em;
        }
        .name {
          color: #5e5f5f;
          font-size: 0.25rem;
        }
        .newPrize {
          .dw {
            font-size: 0.3rem;
          }
          color: #e75257;
          font-size: 0.45rem;
          font-weight: 600;
        }
      }
    }
  }
}
.select {
  width: 100%;
  height: 1rem;
  line-height: 2.5em;
  z-index: 9999;
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  position: fixed;
  bottom: 0;
  left: 0;
  .options {
    width: 20%;
    font-size: 0.25rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-right: 1px solid #000;
  }
  .name {
    width: 5em;
  }
  .options:last-child {
    border: none;
  }
  .chosed {
    color: #149559;
  }
  .spec {
    font-size: 10px;
    .info {
      width: 5em;
    }
  }
}

.top_bg {
  height: 5rem;
  background-color: #009e41;
  background: url("http://sino-sources.com/h5a1/img/bg1.jpg") 0 center no-repeat;
  background-size: cover;
  position: relative;
  color: #ffffff;
  margin-bottom: 1.5rem;
  .avatar {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    bottom: -8%;
    right: 0.2rem;
    border-radius: 0.1rem;
    border: 1px solid #2faf62;
    display: flex;
    align-items: center;
    justify-content: center;
    .img {
      width: 1.47rem;
      height: 1.47rem;
      border-radius: 0.1rem;
    }
  }
  .name {
    color: #fff;
    position: absolute;
    bottom: 3%;
    right: 2rem;
    font-weight: 800;
    font-size: 0.35rem;
  }
  .bigtit {
    font-size: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
  }
  div {
    line-height: 1.6;
  }
  .time {
    font-size: 0.3rem;
    font-weight: 600;
  }
  .secTit {
    font-size: 0.45rem;
    font-weight: 600;
  }
  .desc1 {
    font-size: 0.3rem;
    font-weight: 600;
  }
  .desc2 {
    font-size: 0.35rem;
    font-weight: 600;
  }
}
.item_p {
  padding: 0.2rem;
  display: flex;
  .avatar {
    width: 1rem;
    height: 1rem;
    display: block;
    border-radius: 5px;
  }
  .ownInfo {
    flex: 1;
    padding-left: 0.3rem;
    text-align: left;
    padding-top: 0.1rem;
    .name {
      color: #687091;
      font-weight: 800;
      font-size: 0.33rem;
    }
    .txt {
      margin-top: 0.1rem;
      font-weight: 600;
      line-height: 1.6;
      color: #000000;
      font-size: 0.35rem;
    }
    .imgs {
      margin-top: 5px;
      margin-bottom: 5px;
      display: flex;
      flex-wrap: wrap;
      img {
        width: 2.2rem;
        height: 2.2rem;
        margin-right: 5px;
      }
    }
    .proinfo {
      .proname {
        color: #605f5b;
        line-height: 1.5em;
        font-weight: 600;
      }
      .intro {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          color: #c30631;
          font-weight: 800;
        }
        .right {
          a {
            text-decoration: underline;
            color: #3e5483;
          }
        }
      }
    }

    .comment {
      background-color: #f6f8f7;
      margin-top: 5px;
      color: #495a7b;
      font-weight: 500;
      .item_com {
        padding-bottom: 3px;
        border-bottom: 1px solid #e2e6e6;
        .com {
          display: flex;
          padding: 0.05rem;
          span {
            font-size: 0.3rem;
            padding-left: 0.05rem;
          }
        }
        .nickname {
          color: #646d95;
          font-weight: 500;
          height: 1em;
        }
        .comm {
          color: #000000;
          font-weight: 600;
        }
        .informa {
          color: #000000;
          font-weight: 600;
          line-height: 1.5;
        }
        .informa1 {
          font-weight: normal;
          color: #000000;
          line-height: 1.5;
        }
      }
      .top {
        padding: 0.1rem;
      }
      .item_com:last-child {
        border: none;
      }
    }
  }
}

.scroll-view {
  height: 100vh;
}

#lists {
  height: 100vh;
  overflow-y: scroll;
  transition: all 0.5s linear;
}
</style>
